<template>
	<w-container id="container" class="page-bg" :diyNav="true">
		<u-sticky :bgColor="bgColor">
			<w-navbar :placeholder="false"  autoBack leftIconColor="#000" title="排行榜"></w-navbar>
			<w-tabs :tabList="tabList" @change="changeTab"></w-tabs>
		</u-sticky>
		<topthree :list="list.slice(0,3)" :type="type"></topthree>	
		<rankingList :type="type" :list="list.slice(3,list.length)" :my="my"></rankingList>
		<view v-if="!list.length">
			<w-loading emptyTop="150" type="empty" emptyType="search"></w-loading>    
		</view>
	</w-container>  
</template>
   
<script>   
	import topthree from './components/topthree.vue'
	import rankingList from './components/rankingList.vue'
	import { ranking } from "@/api/market/index.js"
	export default {
		components:{ topthree,rankingList },
		data() {  
			return { 
				bgColor:'unset', 
				tabList:[ 
					{
						name:'邀请榜',
						type:1
					},
					{
						name:'购买榜',
						type:3
					}					
					// {
					// 	name:'持仓榜'
					// }
				],
				type:1,
				list:[],
				my:{},
				activityRule:''
			}
		}, 
		onPageScroll({scrollTop}) {
			if(scrollTop < 30) {
				this.bgColor = 'unset'
			}else {
				this.bgColor = '#fff'
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				ranking({types:this.type}).then( res => {
					const { data,my,activityRule } = res.data
					this.list = data
					this.my = my || {}
					this.activityRule = activityRule
				}).catch( err => {})
			},
			changeTab(e){
				this.type = e.type
				this.getList()
			}
		}
	}
</script>

<style>

</style>
